<h2>animation.js</h2>
<p>Implements basic animation framework, as well as some pre-defined animation effects.</p>
<hr/>

<h3>Objects</h3>
<ul>
	<li><a href="#animation">OAT.Animation(element, optionsObject)</a></li>
	<li><a href="#animationsize">OAT.AnimationSize(element, optionsObject)</a></li>
	<li><a href="#animationposition">OAT.AnimationPosition(element, optionsObject)</a></li>
	<li><a href="#animationopacity">OAT.AnimationOpacity(element, optionsObject)</a></li>
	<li><a href="#animationcss">OAT.AnimationCSS(element, optionsObject)</a></li>
</ul>

<h3>Methods</h3>
<ul>
	<li><a href="#start">OAT.Animation::start()</a></li>
	<li><a href="#stop">OAT.Animation::stop()</a></li>
</ul>

<h3>Messages</h3>

<ul>
	<li>OAT.MSG.ANIMATION_STOP - sent when animation finishes (by its own means, not when stopped by stop())</li>
</ul>

<p><em>REMARK:</em> When attaching message listeners to Animation* derivatives, attach them to the .animation property instead. Example:</p>
<pre class="code">
var as = new OAT.AnimationSize("myDiv");
OAT.MSG.attach(as.animation, OAT.MSG.ANIMATION_STOP, myCallback);
</pre>


<hr/>

<h3><a name="animation">OAT.Animation(element, optionsObject)</a></h3>
<p>Creates animation of <em>element</em>. All parameters are specified in <em>optionsObject</em>; for most use cases, 
it is more suitable to use some pre-defined Animation* object. Properties of <em>optionsObject</em>:</p>
<ul>
	<li>delay - in msec</li>
	<li>startFunction - to be executed when animation starts</li>
	<li>conditionFunction - checked every step</li>
	<li>stepFunction - executed every step</li>
	<li>stopFunction - executed when conditionFunction returns true (and animation stops)</li>
</ul>

<h3><a name="animationsize">OAT.AnimationSize(element, optionsObject)</a></h3>
<p>Animates <em>element</em>'s size. Properties of <em>optionsObject</em>:</p>
<ul>
	<li>delay - in msec</li>
	<li>width - final width; -1 to ignore</li>
	<li>height - final height; -1 to ignore</li>
	<li>speed - speed of animation (in pixels)</li>
</ul>

<h3><a name="animationposition">OAT.AnimationPosition(element, optionsObject)</a></h3>
<p>Animates <em>element</em>'s position. Properties of <em>optionsObject</em>:</p>
<ul>
	<li>delay - in msec</li>
	<li>left - final left coordinate; -1 to ignore</li>
	<li>top - final top coordinate; -1 to ignore</li>
	<li>speed - speed of animation (in pixels)</li>
</ul>

<h3><a name="animationopacity">OAT.AnimationOpacity(element, optionsObject)</a></h3>
<p>Animates <em>element</em>'s opacity. Properties of <em>optionsObject</em>:</p>
<ul>
	<li>delay - in msec</li>
	<li>opacity - final opacity in 0..1</li>
	<li>speed - speed of animation (in opacity steps)</li>
</ul>

<h3><a name="animationcss">OAT.AnimationCSS(element, optionsObject)</a></h3>
<p>Animates <em>element</em>'s CSS property. Properties of <em>optionsObject</em>:</p>
<ul>
	<li>delay - in msec</li>
	<li>property - name of CSS property</li>
	<li>start - initial value</li>
	<li>step - per-step value</li>
	<li>stop - final value</li>
</ul>

<h3><a name="start">OAT.Animation::start()</a></h3>
<p>Starts the animation.</p>

<h3><a name="start">OAT.Animation::stop()</a></h3>
<p>Stops the animation.</p>

<pre class="code">
var div = Dom.create("div");
var a = new OAT.AnimationOpacity(div, {opacity:0.5, delay:50, speed: 0.02});
a.start(); // will slowly make &lt;div&gt; element 50% transparent
</pre>
